<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AjaxRequester 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #userInfo {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<h1>用户信息获取</h1>
<button id="fetchButton">获取用户信息</button>
<div id="userInfo">点击按钮获取用户信息。</div>

<!-- 引入外部 JavaScript 文件 -->
<script src="ajaxRequester.js"></script>
<script>
    function init(){
        console.log("init()")
        document.addEventListener('DOMContentLoaded', function() {
            const ajaxRequester = AjaxRequester.getInstance(config);
            document.getElementById('fetchButton').addEventListener('click', function() {
                ajaxRequester.fetchData('/users/1')
                    .then(data => {
                        console.log('Data:', data);
                        const wrappedJsonString = "'" + data + "'"
                        const parsedData = JSON.parse(wrappedJsonString);
                        document.getElementById('userInfo').innerHTML =
                            `<p>姓名: ${parsedData.name}</p>
                     <p>邮箱: ${parsedData.email}</p>
                     <p>地址: ${parsedData.address.city}</p>`;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        // document.getElementById('userInfo').innerHTML = `<p>${error}</p>`;
                    });
            });
        });

    }

    init();
</script>
</body>
</html>